<template>
  <div class="echart-part">
    <echart-title :title="para.title"></echart-title>
    <div :id="para.id" class="echart_content demo1">

    </div>
  </div>
</template>

<script>
import statService from '@/api/stat/stat'
import echartTitle from "../common/echart-title";

const echarts = require('echarts')

let color1 = ['#FFFF33', '#33FFDD', '#FF8800']
let color2 = ['#99FF33', '#FF0000']
let myChart
let emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};
let option = {
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(17,35,60,0.8)',
    formatter: function (params) {
      let seriesName_0 = params[0].seriesName
      let value0 = params[0].value
      // let seriesName_1 = params[1].seriesName
      // let value1 = params[1].value
      let axisValue = params[0].axisValue
      return `
                  <span style="color: #378FDD">${value0}条</span><br>`
    },
    borderWidth: 0,
  },
  legend: {
    show: true,
    data: ['已导出', '待导出'],
    textStyle: {//图例文字的样式
      color: '#85ABC5'
    },
    right: 0,

    icon: 'roundRect',
    itemWidth: 8,
    itemHeight: 8,
  },
  grid: {
    top: "15%",
    left: "0%",
    right: "0%",
    bottom: "3%",
    show: false, // 显示边框
    borderColor: "#012f4a", // 边框颜色
    containLabel: true // 包含刻度文字在内
  },
  xAxis: {
    data: ["1", "2", "3", "4", "5",'6','7','8','9','11'],
    axisTick: {show: false},
    axisLine: {
      show: true,
      lineStyle:{
        color:'#AAE3FF',
        opacity: 0.25,
      }
    },
    axisLabel: {
      color: '#58BFF9'

    }
  },
  yAxis: {
    name: "条",
    nameTextStyle:{
      color: '#85ABC5',
      padding:[0,0,-8,0],
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#85ABC5', // 分割线颜色
        // type: 'dashed',
        width: 1,
        opacity: 0.05
      }
    },
    axisTick: {show: false},
    axisLine: {
      show: true,
      lineStyle:{
        color:'#AAE3FF',
        opacity: 0.25,
      }
    },
    axisLabel: {
      show: true,
      color: '#85ABC5',
      opacity:0.5
    }
  },
  // 待打包 已打包 已分发 执行成功 执行失败

  series: [
    {
      type: 'line',
      stack: 'Total',
      emphasis: emphasisStyle,
      smooth: true,
      showSymbol: false,
      symbol: 'circle',

      showBackground: true,
      backgroundStyle: {
        color: 'transparent'
      },
      barWidth: '30%',
      itemStyle : {//线条的渐变
        normal:{
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0,[
              {
                offset:0.8, color: '#2c8aec' // 0% 处的颜色
              },
              {
                offset:0, color: '#ff0202' // 100% 处的颜色
              },
            ]
          ),  //背景渐变色
          borderColor:'#2c8aec',
          borderWidth:4
        }
      },
      areaStyle: {
        normal: {
          // 填充色渐变
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: "#084569",opacity:1},
            { offset: 1, color: "#481a2b",opacity:0.1},
          ])
        }
      },
      data: [0, 2, 1, 3, 2,4,5,3,6,7],
      z: 10,
      label: {
        show: false,
        position: 'top'
      }
    },
  ]
}

export default {
  name: 'sensitiveWordCount',
  props: {
    para: {}
  },
  components: {
    echartTitle
  },
  data() {
    return {
      timer: '',
      data: [],
      des: [],
      reload: false,
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    reload(value) {
      if (value) {
        // option.series[0].data = this.data
        let newArr = []
        for (let i = 0; i < this.data.length; i++) {
          newArr.push(0);
        }
        // option.series[1].data = newArr
        // option.xAxis.data = this.des
        this.draw()
      }
    }
  },
  beforeDestroy() {
    if (this.timer) { // 如果定时器还在运行 或者直接关闭，不用判断
      clearInterval(this.timer) // 关闭
    }
  },

  methods: {
    getData() {
      this.data = []
      this.des = []
      this.reload = false
      statService.queryStatusCount().then(res => {
        if (res.success) {
          res.data.forEach(item => {
            this.formatCount(item)
          })
          this.reload = true
        }
      }).catch((err) => console.log(err)) // 捕获异常;
    },

    draw() {
      let div = document.getElementById(this.para.id)
      if (!myChart || !div.innerHTML) {
        myChart = echarts.init(document.getElementById(this.para.id))
      }
      myChart.setOption(option)
      window.addEventListener("resize", () => myChart.resize(), false);
    },
    formatCount(item) {
      let count = parseInt(item.count)
      let status = parseInt(item.status)
      if (status == 5 || status == 6) {
        return
      }
      let str = ''
      // eslint-disable-next-line no-unused-vars
      let img = ''
      // eslint-disable-next-line no-unused-vars
      let color = ''
      switch (status) {
        case 0:
          str = '待打包'
          img = '/admin.jpg'
          color = color1[0]
          break // 待打包
        case 1:
          str = '已打包'
          img = 'admin.jpg'
          color = color1[1]
          break // 已打包
        case 2:
          str = '已分发'
          img = '/public/admin.jpg'
          color = color1[2]
          break // 已分发
        case 3:
          str = '执行成功'
          img = './public/admin.jpg'
          color = color2[0]
          break // 执行成功
        case 4:
          str = '执行失败'
          img = '/models/admin.jpg'
          color = color2[1]
          break // 执行失败
        // case 5:
        //   str = "待审批"
        //   break; //待审批
        // case 6:
        //   str = "已驳回"
        //   break; //已驳回
      }
      //  this.data.push({value:count, symbol:'localhost:8080/'+img, symbolSize: [30, 30]});
      this.data.push({
        value: 3
      })
      this.des.push(str)
    }
  }
}
</script>

<style scoped>
.mybackground {
  background: rgba(17, 35, 60, 0.50);
  border-radius: 10px;
}

.myflex {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

.myimg {
  height: 154px;
}

.myfont {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #008AD9;
  line-height: 20px;
  font-weight: 500;
}

.myfont2 {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #58BFF9;
  text-align: center;
  line-height: 12px;
  font-weight: 400;
}

.myposition {
  text-align: center;
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}
.demo1 {
  box-shadow: 0px 0px 40px 0px #4b1a2a inset;
}
</style>
